<template>
    <div class="chooseCinema">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        {{filmName}}
      </div>
      <div class="content">
        <div class="tab-wrapper">
          <div class="refresh-wrapper" v-show="isRefresh">
            <refresh></refresh>
          </div>
          <loading v-show="isLoading"></loading>
          <div class="top" ref="tab-container">
            <div class="tab-items" ref="tab-items">
              <div class="tab-item"  v-for="(item,index) in time" @click=" _tabCut(index,item)" :class="{active:current===index}" >{{item.calendarDesc}}</div>
              <div class="line" ref="line"></div>
            </div>
          </div>
          <div class="bottom" :class="{maskLayer:maskLayer}">
            <div class="search-btn" @click.prevent.stop="_setSearchTab(0)" :class="{active:tabIndex===0}">{{checkedArea.value}}</div>
            <div class="search-btn" @click.prevent.stop="_setSearchTab(1)" :class="{active:tabIndex===1}">{{checkedActivity.value}}</div>
            <div class="search-btn" @click.prevent.stop="_setSearchTab(2)" :class="{active:tabIndex===2}">{{checkedType.value}}</div>
          </div>
        </div>
        <transition name="fade">
          <div class="mask-layer" v-show="maskLayer" @click="_hiddenMaskLayer">
            <div class="tags-wrapper" @click.stop>
              <div v-if="showAreaStatus">
                <div class="tags-container" v-for="item in areaArr">
                  <div class="tag" :class="{active:item===checkedArea}" @click="checkedArea=item">{{item.value}}</div>
                </div>
              </div>
              <div v-if="showActivityStatus">
                <div class="tags-container" v-for="item in activityArr">
                  <div class="tag" :class="{active:item===checkedActivity}" @click="checkedActivity=item">{{item.value}}</div>
                </div>
              </div>
              <div v-if="showTypeStatus">
                <div class="tags-container" v-for="item in typeArr">
                  <div class="tag" :class="{active:item===checkedType}" @click="checkedType=item">{{item.value}}</div>
                </div>
              </div>
            </div>
          </div>
        </transition>
        <div class="items-wrapper" ref="items-wrapper">
          <div class="items-container">
            <div class="item" @click="$router.push({path:'/chooseSession',query:{id:item.id,filmId:$route.query.id}})" v-for="item in itemList">
              <div class="row-name-price">
                <div class="name">{{item.name}}</div>
                <div class="price"><span class="count">{{item.lowestPrice}}<span class="unit">元</span></span>起</div>
              </div>
              <div class="row-address-distance">
                <div class="address">{{item.address}}</div>
                <div class="distance">{{item.distanceDesc}}</div>
              </div>
              <div class="tags" v-show="item.actLabelList">
                <div class="tag" v-for="tag in item.actLabelList" v-if="tag.type===0">{{tag.actLabel}}</div>
              </div>
              <div class="activity" v-show="item.actLabelList">
                <div class="badge"  v-if="item.actLabelList">促</div>
                <div class="text" v-if="item.actLabelList" >{{item.actLabelList[0]?item.actLabelList[0].actName:''}}</div>
              </div>
              <div class="type-wrapper">
                <div class="type-container" :style="{width:(item.movieSessionList?item.movieSessionList.length:0)*68+'px'}">
                  <div class="type-item" v-for="type in item.movieSessionList" @click.stop="$router.push({path:'/chooseSeat',query:{movieSessionId:type.id}})">
                    <div class="time">{{type.playingTimeDesc}}</div>
                    <div class="type">
                      {{type.filmTypeVersionDesc}}
                    </div>
                    <div class="price">
                      {{type.settlePrice}}元
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <endLine :text="'我是有底线的'" v-show="endFlag"></endLine>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import refresh from '../../../components/refresh/refresh'
  import loading from  '../../../components/loading/loading'
  import endLine from  '../../../components/endLine/endLine'
  import BScroll from 'better-scroll'
  import {getStorage} from "../../../common/js/localStorage";
  import {getSession} from "../../../common/js/sessionStorage";
  import global from '../../../common/js/global'
    export default {
        name: "chooseCinema",
        components:{
          'back':back,
          'refresh':refresh,
          'loading':loading,
          'endLine':endLine
        },
        data(){
          return{
            endFlag:false,
            isLoading:true,
            isRefresh:false,
            maskLayer:false,
            current:0,
            tabIndex:4,
            filmName:'',
            time:[],
            checkedArea:{code:-1,value:'城市区域'},
            checkedActivity:{code:0,value:'活动类型'},
            checkedType:{code:1,value:'离我最近'},
            areaArr:[],
            activityArr:[],
            typeArr:[],
            showAreaStatus:false,
            showActivityStatus:false,
            showTypeStatus:false,
            calendarInt:'',
            itemList:[
              {
                name:'',
                price:'',
                address:'',
                distance:'',
                actLabelList:[],
                activity:'',
                movieSessionList:['']
              }
            ],
            rows:10,
            initializeFlag:true,

          }
        },
        methods:{
          _tabCut(index,item){
            this.current=index
            this.calendarInt=item.calendarInt
            this.rows = 10
            this._getCinemaList()
          },
          _refreshBScroll(){
            this.$nextTick(()=>{
              if(!this.scroll){
                let dom = document.getElementsByClassName('type-wrapper')
                for(let i = 0; i<dom.length ;i++){
                  let wrapper = dom[i]
                  let scroll = new BScroll(wrapper,{click:true,scrollX:true})
                }

              }else {
                this.scroll.refresh();
              }
            })
          },
          _getSearchList(status){
            switch (status) {
              case 0:
                this.showAreaStatus = true
                this.showActivityStatus = false
                this.showDistanceStatus = false
                break
              case 1:
                this.showAreaStatus = false
                this.showActivityStatus = true
                this.showDistanceStatus = false
                break
              case 2:
                this.showAreaStatus = false
                this.showActivityStatus = false
                this.showDistanceStatus = true
                break
            }
            this.shadowStatus = true
          },
          _setTabContainerWidth(){
            this.$refs['tab-items'].style.width = (this.time.length)*96 + 20 + 'px'
          },
          _setSearchTab(index){
            this.tabIndex=index
            this.maskLayer=true
            switch (index) {
              case 0:
                this.showAreaStatus = true
                this.showActivityStatus = false
                this.showTypeStatus = false
                    break
              case 1:
                this.showAreaStatus = false
                this.showActivityStatus = true
                this.showTypeStatus = false
                    break
              case 2:
                this.showAreaStatus = false
                this.showActivityStatus = false
                this.showTypeStatus = true
                    break

            }
          },
          _hiddenMaskLayer(){
            this.maskLayer = false
            this.tabIndex=4
          },
          _getCinemaList(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/chooseCinemaSession',
                data:{
                  offset:0,
                  rows:this.rows,
                  filmId:this.$route.query.id,
                  longitude:getSession('point').lng,
                  latitude:getSession('point').lat,
                  cityCode:getSession('currentCityCode'),
                  areaCode:this.checkedArea.code,
                  labelActType:this.checkedActivity.code,
                  featureType:this.checkedType.code,
                  calendarInt:this.calendarInt
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  if(this.initializeFlag){
                    this.areaArr = data.areaList
                    this.checkedArea = data.areaList[0]
                    this.activityArr = data.labelActTypeList
                    this.checkedActivity = data.labelActTypeList[0]
                    this.typeArr = data.featureTypeList
                    this.checkedType = data.featureTypeList[0]
                    this.time = data.calendarList
                    for(let i=0;i<data.calendarList.length;i++){
                      if(data.calendarList[i].todayStatus){
                        this.calendarInt = data.calendarList[i].calendarInt
                      }
                    }
                    this.initializeFlag = false
                  }
                  this.endFlag = data.endFlag
                  this.itemList = data.cinemaSessionList
                }
              }else{
              }
            })
          },
        },
        mounted(){
          this._getCinemaList()
          this.filmName = this.$route.query.name
          this.$nextTick(()=>{
            if(!this.scroll){
              let scroll = new BScroll(this.$refs['items-wrapper'],{
                click:true,
                pullUpLoad:{
                  threshold:-50
                },
                pullDownRefresh: {
                  threshold: 40,
                  stop: 30
                }
              })
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });
              let _this = this
              scroll.on('pullingUp',()=>{
                if(!_this.endFlag){
                  _this.rows+=10;
                  _this._getCinemaList()
                }
                scroll.refresh()
                scroll.finishPullUp()

              })
            }else {
              this.scroll.refresh()
            }
          })
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['tab-container'],{click:true,scrollX:true})
            }else {
              this.scroll.refresh();
            }
          })
        },
        watch:{
          'time'(){
            this._setTabContainerWidth()
          },
          'current'(){
            this.$refs['line'].style.left = this.current*96+ 'px'
            this.$refs['line'].style.transition = 'left 0.3s'
          },
          'checkedActivity'(){
            this._getCinemaList()
          },
          'checkedArea'(){
            this._getCinemaList()
          },
          'checkedType'(){
            this._getCinemaList()
          },
          'itemList'(){
            this._refreshBScroll()
          },
        }
    }
</script>

<style scoped lang="stylus">
  .refresh-wrapper
    position absolute
    width 100%
    z-index 100000
    top 80px
    left 0
  .chooseCinema
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)
      position relative
      padding-top 10px
      .items-wrapper
        height calc(100% - 72px)
        overflow hidden
        .items-container
          .item
            background #171718
            padding 15px 10px
            margin-bottom 10px
            .row-name-price
              display flex
              .name
                flex 1
                text-align left
                color #ffffff
                font-size 16px
                height 22px
                line-height 22px
                vertical-align center
              .price
                flex 0 0 66px
                height 20px
                vertical-align center
                color #C4C4C4
                font-size 12px
                text-align right
                .count
                  font-size 14px
                  color #F7C20F
                  line-height 20px
                  .unit
                    font-size 12px

            .row-address-distance
              padding-top 6px
              height 17px
              display flex
              line-height 17px
              color #8B929E
              font-size 12px
              .address
                flex 1
                text-align left
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
              .distance
                flex 0 0 75px
                text-align right
            .tags
              height 15px
              text-align left
              padding-top 8px
              .tag
                margin-right 3px
                display inline-block
                height 13px
                border 1px solid #F7C20F
                font-size 10px
                line-height 13px
                color #F7C20F
                border-radius 7px
                padding 0 2px
            .activity
              padding-top 10px
              display flex
              height 17px
              .badge
                flex 0 0 14px
                height 14px
                color #222426
                background #EEAC21
                font-size 10px
                border-radius 2px
                line-height 15px
                margin-top 1px
              .text
                flex 1
                padding-left 6px
                line-height 17px
                color #E8E8E8
                font-size 12px
                text-align left
            .type-wrapper
              overflow hidden
              .type-container
                padding-top 13px
                text-align left
                .type-item
                  height 48px
                  width 50px
                  background #212122
                  border-radius 2px
                  padding 6px
                  margin-right 6px
                  display inline-block
                  text-align center
                  .time
                    height 18px
                    line-height 18px
                    font-size 13px
                    color #F2F2F2
                  .type
                    height 14px
                    line-height 14px
                    color #8B929E
                    font-size 10px
                  .price
                    color #F7C20F
                    font-size 12px
                    height 17px
                    line-height 17px
      .mask-layer
        position absolute
        z-index 10
        background rgba(0,0,0,.7)
        height 100%
        width 100%
        top 0
        &.fade-enter-active, &.fade-leave-active
          transition: opacity .3s;
        &.fade-enter, &.fade-leave-to
          opacity: 0;
        .tags-wrapper
          position relative
          top 72px
          padding 14px 10px 16px 10px
          background #171718
          text-align left
          .tags-container
            display inline-block
            width 25%
            text-align center
            height 34px
            padding-top 8px
            .tag
              width 80px
              height 32px
              border 1px solid #8B929E
              font-size 12px
              line-height 32px
              color #8B929E
              border-radius 2px
              transition color 0.3s
              &.active
                border 1px solid #F7C20F
                color #F7C20F
                transition color 0.3s
      .tab-wrapper
        .top
          height 25px
          .tab-items
            position relative
            display flex
            .tab-item
              height 18px
              line-height 18px
              width 65px
              padding-right 31px
              font-size 13px
              color #8B929E
              transition color 0.3s
              &:first-child
                padding-left 10px
              &:last-child
                padding-right 10px
              &.active
                color #F7C20F
                transition color 0.3s
            .line
              position absolute
              left 0
              margin 0 22.5px
              bottom -4px
              width 40px
              height 2px
              background #F7C20F
        .bottom
          position relative
          margin-top 5px
          z-index 1000
          display flex
          height 32px
          padding-bottom 15px
          transition background 0.3s
          &.maskLayer
            background #171718
            transition background 0.3s
          .search-btn
            flex 1
            font-size 13px
            line-height 32px
            color #8B929E
            transition color 0.3s
            &.active
              color #F7C20F
              transition color 0.3s


</style>
